<template>
<div id="out10">
	<div class="back"></div>
    <ul class="haiwai">
    		<li class="tit">
    			海外直邮订单
    		</li>
    		<li class="shopp">
    		    <img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
    		    <div>
    		    	    <p class="tit">会呼吸丝滑蜜粉</p>
    		    	    <p>规格：蜜粉</p>
    		    	    <p><span class="price">￥166.06</span>x1件</p>
    		    </div>
    		</li>
    		<li class="shopp">
    		    <img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png" alt=""/>
    		    <div>
    		    	    <p class="tit">会呼吸丝滑蜜粉</p>
    		    	    <p>规格：蜜粉</p>
    		    	    <p><span class="price">￥166.06</span>x1件</p>
    		    </div>
    		</li>
    		<li class="btn">
    			显示另外1件（共2件） <img src="../assets/img/gouwuche/down.png" alt=""/>
    		</li>
    		<li class="btn">
    			收起 <img src="../assets/img/gouwuche/xiangshangjiantou.png" alt=""/>
    		</li>
    </ul>
    <ul class="bottom4">
	    	<li class="bott">
	    		商品金额:
	    		<span>￥332.12</span>
	    	</li>
	    	<li class="bott">
	    		订单邮费:
	    		<span>￥50.00</span>
	    	</li>
	    	<li class="bott">
	    		关税:
	    		<span>￥10</span>
	    	</li>
	    	<li class="bott">
	    		订单金额:
	    		<span>￥392.12</span>
	    	</li>
	    	<li class="anquan">
	    		<span>安全提醒:</span>
	    		 付款成功后，呃呃鹅鹅鹅鹅鹅呃呃额额呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅呃呃鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅
	    	</li>
    </ul>
    <p class="peisong">配送方式 <span>日本直邮</span></p>
    <p class="peisong peisong2">共2件商品 <span>应付： <span>￥392.12</span></span></p>
    <p class="benren"> <img src="../assets/img/fenlei/dui.png" alt=""/>本人同意北京市 <span>《个人问题需要》</span> 和 <span>《用户协议》</span> </p>
    
    <p class="queren"><a href="#/JieSuan">确认</a></p>
   
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var xl=false;
				$("#out10 .btn").eq(1).hide();
				$("#out10 .shopp").eq(1).hide();
				$("#out10 .btn").click(function(){
					xl=!xl;
					xiala();
				});
				function xiala(){
					if (xl==false) {
						$("#out10 .shopp").eq(1).slideUp(500);
						$("#out10 .btn").eq(1).hide();
						$("#out10 .btn").eq(0).show();
					} else if(xl==true){
						$("#out10 .shopp").eq(1).slideDown(500);
						$("#out10 .btn").eq(1).show();
						$("#out10 .btn").eq(0).hide();
					};
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out10{
		background: #f2f2f2;
	}
	#out10>.back{
		height: 2rem;
	}
	.haiwai{
		background: white;
	}
	.haiwai>.tit{
		font-size: 2.8rem;
		line-height: 8rem;
		padding-left: 2rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.shopp{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 20rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.shopp>img{
		width: 8.6rem;
		height: 10rem;
	}
	.shopp>div{
		height: 20rem;
		width: 40rem;
	}
	.shopp>div>p{
		font-size: 2.4rem;
		padding-bottom: 3rem;
	}
	.shopp>div>.tit{
		font-size: 2.8rem;
		padding: 3rem 0;
	}
	.shopp>div>p>.price{
		color: #FF0000;
		padding-right: 3rem;
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 6rem;
		font-size: 2.8rem;
	}
	.btn img{
		width: 2.4rem;
		height: 1.4rem;
		margin-left: 3rem;
	}
	.bottom4{
		font-size: 2.8rem;
		background: white;
		margin-top: 2rem;
	}
	.bottom4>.bott{
		height: 6rem;
		border-bottom: 0.1rem solid #CCCCCC;
		padding: 2rem;
		box-sizing: border-box;
	}
	.bottom4>.bott>span{
		float: right;
		color: #FF0000;
	}
	.bottom4>.anquan{
		padding: 2rem;
		color: #666666;
		font-size: 2.4rem;
		line-height: 4rem;
	}
	.bottom4>.anquan>span{
		font-size: 2.8rem;
		color: #FF0000;
	}
	#out10>.peisong{
		padding: 2rem;
		margin: 2rem 0;
		margin-bottom: 6rem;
		background: white;
		font-size: 2.8rem;
	}
	#out10>.peisong2{
		margin-bottom: 0;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out10>.peisong2>span>span{
		color: #FF0000;
	}
	#out10>.peisong>span{
		float: right;
	}
	#out10>.benren{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.8rem;
		background: white;
		height: 9rem;
	}
	#out10>.benren>span{
		color: #FF0000;
	}
	#out10>.benren>img{
		width: 3rem;
		height: 3rem;
		margin-right: 1rem;
	}
	#out10>.queren{
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: white;
		padding: 2rem 0;
	}
	#out10>.queren a{
		width: 68rem;
		height: 4rem;
		border-radius: 4rem;
		background: #e53e42;
		text-align: center;
		line-height: 4rem;
		color: #FFFFFF;
		font-size: 2.8rem;
	}
</style>